<template>
    <el-row>
        <el-col :span="16">
            <div class="demo-image__lazy">
                <el-image v-for="url in urls" :key="url" :src="url" lazy style="width:100%;height:100%" />
            </div>
        </el-col>
        <el-col :span="6">
            <h1 style="text-align:center">欢迎登录fcsummer学生综合平台</h1>
            <div class="form">
                <el-form :model="loginForm">
                    <el-form-item label="username">
                        <el-input v-model="loginForm.username" placeholder="username">
                            <template #prefix>
                                <el-icon class="el-input__icon">
                                    <search />
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="password">
                        <el-input v-model="loginForm.password" type="password" autocomplete="off">
                            <template #prefix>
                                <el-icon class="el-input__icon">
                                    <search />
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="type">
                        <el-radio-group v-model="loginForm.type">
                            <el-radio-button label="student" />
                            <el-radio-button label="teacher" />
                            <el-radio-button label="admin" />
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <div class="checkButton">
                    <el-button type="success" @click="goLogin" size="large">登录</el-button>
                    <el-button type="" @click="goRegister" size="large">注册</el-button>
                </div>

            </div>
        </el-col>
    </el-row>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { ElImage, ElForm, ElInput, ElIcon, ElButton, ElAlert, ElMessage, ElRadioGroup } from 'element-plus'

import { reactive, ref } from 'vue'
import { getCurrentInstance } from 'vue'
import { watch } from 'vue'
import { useRouter } from 'vue-router'
import { login } from '../API/ApiMethod'
import { AES_Encrypt } from '../crypto/index'
components: {
    ElImage,
        ElForm,
        ElInput,
        ElIcon,
        Search,
        ElButton,
        ElAlert,
        ElMessage,
        ElRadioGroup
}
let type = ref('student')
const router = useRouter()
console.log('path',router.currentRoute._rawValue.path)
const loginForm = reactive({
    username: '',
    password: '',
    type: ''
})
const { proxy } = getCurrentInstance()
const urls = reactive([
    'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
    'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
    'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
    'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
    'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
    'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
    'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
])
function goLogin() {
    sessionStorage.removeItem('token')
    let token = sessionStorage.getItem('token')
    if (token == null || token == undefined || token == '') {
        if (loginForm.username != "" && loginForm.password != "") {
            loginForm.password = AES_Encrypt(loginForm.password)
            login(loginForm.username, loginForm.password, loginForm.type).then(res => {
                if (res.code == 10000) {
                    sessionStorage.setItem('token', res.data)
                    sessionStorage.setItem('type', loginForm.type)
                    if (loginForm.type=='student'){
                        router.push({
                            name: 'my'
                        })
                    }else if(loginForm.type=='teacher'){
                        router.push({
                            name:'index'
                        })
                    }else if(loginForm.type=='admin'){
                        router.push({
                            name:'index'
                        })
                    }
                    loginForm.username = ""
                    loginForm.password = ""
                    loginForm.type = ""
                }else{
                    ElMessage({
                        type:'error',
                        message:'登陆失败，请重试'
                    })
                }
            }).catch(err => {
                loginForm.username = ""
                loginForm.password = ""
                loginForm.type = ""
                ElMessage({
                    type: 'error',
                    message: '登陆出错,仔细想想密码吧'
                })
                throw err
            })

        } else {
            ElMessage({
                message: '输入内容不能为空',
                type: 'error'
            })
        }
    } else {
        ElMessage({
            type: 'warning',
            message: '不要重复登陆'
        })
    }

}

function goRegister() {
    router.push({
        name: 'register'
    })
}

</script>

<style scoped>
.form {
    margin-left: 30px;
    margin-top: 100px;
}

.checkButton {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.demo-image__lazy {
    height: 1000px;
    overflow-y: auto;
}

.demo-image__lazy .el-image {
    display: block;
    min-height: 200px;
    margin-bottom: 10px;
}

.demo-image__lazy .el-image:last-child {
    margin-bottom: 0;
}
</style>